<template>
  <Modal :value.sync="dialogCitySelectedVisible"
          width="70%"
          title="请选择主推城市"
          @on-ok="handleCityOk"
          @on-cancel="handleCityCancle">
    <Card title="选择主推城市"
          dis-hover
          class="ivu-mt">
      <Row style="display: flex;">
        <Col span="8"
              offset="1">
        <Tree ref="cityTree"
            :data="treeCityData"
            show-checkbox
            multiple />
        </Col>
      </Row>
    </Card>
  </Modal>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      dialogCitySelectedVisible: false,
    }
  },
  computed: {
    ...mapState('commonComps/citySelected', [
      'treeCityData'
    ])
  },
  watch: {
    /* 监听是否显示模态框的父组件传值 */
    visible (newValue) {
      this.dialogCitySelectedVisible = newValue
    },
  },
  destroyed () {
    /* 组件销毁时重置vuex state的数据 */
    this.RESET_CITY_DATA()
  },
  methods: {
    ...mapMutations('commonComps/citySelected', [
      'SET_SELECTED_CITY_LIST', 'CHANGE_CITY_CHECKED', 'RESET_CITY_DATA'
    ]),
    handleCityOk () {
      let checkedNodesList = this.$refs.cityTree.getCheckedNodes();
      this.SET_SELECTED_CITY_LIST(checkedNodesList)
      this.dialogCitySelectedVisible = false
      this.$emit('update:visible', false)
    },
    handleCityCancle () {
      this.dialogCitySelectedVisible = false
      this.$emit('update:visible', false)
    },
  }
}
</script>
